<template>
  <div>
    <div>
      名称： <Input v-model="searchData.name" placeholder="Enter something..." style="width: 300px" />
      <Button type="primary" icon="ios-search" @click="search">Search</Button>
      <Button :size="buttonSize" type="primary" @click="add">新增菜单</Button>

    </div>
    <Table border :columns="columns7" :data="data6" />
    <Page :total="total" show-total show-elevator :page-size="searchData.pageSize" :current="searchData.pageCurrent" prev-text="上一页" next-text="下一页" @on-change="add()" />

    <el-dialog :close-on-click-modal="false" :title="textMap[dialogStatus] == 'update' ? '修改' : '新增'" :visible.sync="dialogFormVisible">
      <Form ref="temp" :model="temp" :label-width="80" :rules="rules">
        <FormItem label="名称" prop="name">
          <Input v-model="temp.name" placeholder="Enter something..." />
        </FormItem>
        <FormItem label="网站地址" prop="websiteUrl">
          <Input v-model="temp.websiteUrl" placeholder="Enter something..." />
        </FormItem>
        <FormItem label="简介" prop="synopsis">
          <Input v-model="temp.synopsis" placeholder="Enter something..." />
        </FormItem>
        <FormItem label="排序" prop="listSort">
          <Input v-model="temp.sorts" placeholder="Enter something..." />
        </FormItem>
        <FormItem label="状态" prop="status">
          <Select v-model="temp.status">
            <Option value="1">显示</Option>
            <Option value="0">不显示</Option>
          </Select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="commit">提交</Button>
          <Button style="margin-left: 8px" @click="dialogFormVisible = false">退出</Button>
        </FormItem>
      </Form>
    </el-dialog>
  </div>
</template>
<script>
import { getDate, setSuggest } from '@/utils/dateUtile'
import { getPageFriend, saveFriend, getFriendById, delArticle, updateFriend, updateStatusById } from '@/api/friend_request'
export default {
  data() {
    return {
      datetime: 'yyyy:MM:dd:',
      temp: {
        id: undefined,
        name: '',
        websiteUrl: '',
        synopsis: '',
        status: '',
        sorts: ''
      },
      total: 1,
      dialogFormVisible: false,
      dialogStatus: '',
      rules: {
        name: [{ required: true, message: '必填', trigger: 'change' }],
        websiteUrl: [{ required: true, message: '必填', trigger: 'change' }]
      },
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      searchData: {
        name: '',
        pageSize: 10,
        pageCurrent: 1
      },
      pageSizeOpts: [10, 20],
      buttonSize: 'large',
      columns7: [
        {
          title: '昵称',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.name)
            ])
          }
        },
        {
          title: '网站地址',
          key: 'websiteUrl'
        },
        {
          title: '简介',
          key: 'synopsis'
        },
        {
          title: '是否显示',
          key: 'status',
          render: (h, params) => {
            if (params.row.status === 0) {
              return h('div', {}, '不显示')
            } else if (params.row.status === 1) {
              return h('div', {}, '显示')
            }
            return h('div', {}, '发布')
          }
        },
        {
          title: '排序',
          key: 'sorts'
        },
        {
          title: '创建时间',
          key: 'startTime',
          render: (h, params) => {
            return h('div', {}, getDate(params.row.startTime))
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 230,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    console.log(params)
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.delete(params.row.id)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.update(params.row.id)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updatestatus(params.row.id, params.row.status)
                  }
                }
              }, '显示')
            ])
          }
        }
      ],
      data6: [

      ]
    }
  },
  created() {
    this.data6 = []
    this.createPage()
  },
  methods: {
    createPage: function() {
      this.data6 = []
      getPageFriend(this.searchData).then(response => {
        var dataObj = response.data
        this.total = dataObj.pageShowTotal
        this.searchData.pageSize = dataObj.pageSize
        this.searchData.pageCurrent = dataObj.pageCurrent + 1
        for (let i = 0; dataObj.pageList.length > i; i++) {
          this.data6.push(dataObj.pageList[i])
        }
      })
    },
    updatestatus(id, status) {
      console.log(id)
      console.log(status)
      if (status === 1) {
        updateStatusById({ id: id, status: '0' }).then(response => {
          this.$Message.success('成功')
          this.search()
        })
      } else if (status === 0) {
        updateStatusById({ id: id, status: '1' }).then(response => {
          this.$Message.success('成功')
          this.search()
        })
      }
    },
    show(index) {
      this.$Modal.info({
        title: '查看',
        content: `昵称：${this.data6[index].name}<br>路径：${this.data6[index].websiteUrl}<br>排序：${this.data6[index].sorts}`
      })
    },
    delete(index) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否确定删除',
        onOk: () => {
          delArticle(index).then(response => {
            console.log(response)
            setSuggest(this.$Modal, '提示信息', '删除成功')
            this.select()
          }).catch(err => {
            console.log(err)
            setSuggest(this.$Modal, '提示信息', '删除失败')
          })
        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    select() {
      this.createPage()
    },
    update(index) {
      this.temp = {}
      getFriendById(index).then(response => {
        this.temp = response.data
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
      }).catch(error => {
        console.log(error)
        setSuggest(this.$Modal, '错误信息', '查询失败')
      })
      console.log(this.temp)
      console.log(this.dialogStatus)
    },
    search() {
      this.select()
    },
    commit() {
      console.log(this.temp)
      if (this.dialogStatus === 'create') {
        saveFriend(this.temp).then(response => {
          setSuggest(this.$Modal, '提示信息', '保存成功')
          this.select()
          this.dialogStatus = ''
          this.dialogFormVisible = false
        }).catch(error => {
          console.log(error)
          setSuggest(this.$Modal, '提示信息', '保存失败')
        })
      } else if (this.dialogStatus === 'update') {
        updateFriend(this.temp).then(response => {
          setSuggest(this.$Modal, '提示信息', '修改成功')
          this.select()
          this.dialogStatus = ''
          this.dialogFormVisible = false
        }).catch(error => {
          console.log(error)
          setSuggest(this.$Modal, '提示信息', '修改失败')
        })
      }
    },
    add() {
      this.temp = {}
      // console.log(this.temp)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    }
  }
}
</script>
